<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/admin/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/admin/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui/css/H-ui.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="/admin/lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title></title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 管理员管理 <span class="c-gray en">&gt;</span> 角色管理 <a class="btn btn-primary radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="page-container">
    <div class="cl pd-5 bg-1 bk-gray">
        <span class="l"> 
            <a class="btn btn-primary radius" href="javascript:;" onclick="add('添加角色','/{{config('constant.name_admin')}}/role/add','800')"><i class="Hui-iconfont">&#xe600;</i> 添加角色</a> 
        </span>
    </div>
    <div class="mt-10 ml-20">
        用户状态颜色标识： <span class="c-blue">未启用</span> &nbsp;&nbsp;&nbsp; <span>已启用</span> &nbsp;&nbsp;&nbsp; <span class="c-red">已禁用</span>
    </div>
    <div class="mt-10">
        <table class="table table-border table-bordered table-hover table-bg table-responsive" id="datatable">
            <thead>
            {{-- <tr>
                <th scope="col" colspan="6">角色管理</th>
            </tr> --}}
            <tr class="text-c">
                {{-- <th width="25"><input type="checkbox" value="" name=""></th>
                <th width="40">ID</th> --}}
                <th>角色名</th>
                <th>用户列表</th>
                <th>备注</th>
                <th width="10%">操作</th>
            </tr>
            </thead>
        </table>
    </div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/admin/lib/layer/3.1.1/layer.js"></script>
<script type="text/javascript" src="/admin/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/admin/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript">
    var table;
    $(function () {
        $.fn.dataTable.ext.errMode = 'throw';//datatable抛异常的方式，在console中输出，默认以alert的方式弹出
        table = $('#datatable').DataTable({
            // order: [[ 5, 'desc' ]],//默认第几个排序
            ordering: false, // 是否排序
            // "stateSave": true,// 状态保存 - 再次加载页面时还原表格状态
            // "stateDuration": -1,//仅保留当前会话的数据
            // "paging":false, //禁用分页
            // serverSide: true,//服务器端处理模式——此模式下如：过滤、分页、排序的处理都放在服务器端进行。
            // responsive: true,//响应式，需要插件
            // fixedHeader: true,//表头固定，需要插件
            // autoWidth: false,
            "deferRender": true,//延迟渲染速度
            ajax: "/{{config('constant.name_admin')}}/role/index",
            processing: true,//加载数据时候是否显示进度条
            language: {url: '/admin/lib/datatables/dataTables_Chinese_Lang.json'},
            /* createdRow : function( row, data, dataIndex ) {
                //当tr元素被创建（所有的td元素已经插入进去），或者给tr绑定事件，该回调函数被执行
                $(row).addClass( 'text-c' );
            },
            initComplete : function (settings, json) {
                //当表格完成加载绘制完成后执行此方法
                // $(row).addClass( 'text-c' );
                // alert(111);
            }, */
            columns: [
                {data: "role_name", class: "text-c"},//角色名
                {
                    data: "managers", class: "text-c", render: function (data, type, row, meta) {
                        let managers = JSON.parse(data);
                        let color = str = '';
                        for (key in managers) {
                            let manager = managers[key];
                            console.log(manager.status)
                            switch (manager.status) {
                                case '1':                //未开启
                                    color = 'c-blue';
                                    break;
                                case '3':                //已禁用
                                    color = 'c-red';
                                    break;
                                default:                 //已启用
                                    color = '';
                            }
                            str += "，<span class='" + color + "'>" + manager.name + '</span>';
                        }
                        str = str.substr(1);
                        return str;
                    }
                },//用户列表
                {data: "remark", class: "text-c"},//备注
                {data: null, class: "text-c"},//操作
            ],
            columnDefs: [
                {targets: [3], searchable: false},//不参与搜索的列
                {
                    //  操作
                    targets: 3,
                    render: function (data, type, row, meta) {
                        if (row.id <= 2) {
                            return '<a class="ml-5 btn radius size-MINI disabled" href="javascript:;" onclick="">编辑</a> ' +
                                ' <a href="javascript:;" onclick="" class="ml-5 btn radius size-MINI disabled" >删除</a>';
                        } else if (row.id == 3) {
                            return '<a class="ml-5 btn btn-primary-outline radius size-MINI " href="javascript:;" onclick="edit(\'编辑\',\'/{{config('constant.name_admin')}}/role/edit\',\'' + row.id + '\',\'\',\'\')">编辑</a> ' +
                                ' <a href="javascript:;" onclick="" class="ml-5 btn radius size-MINI disabled" >删除</a>';
                        } else {
                            return '<a class="ml-5 btn btn-primary-outline radius size-MINI" href="javascript:;" onclick="edit(\'编辑\',\'/{{config('constant.name_admin')}}/role/edit\',\'' + row.id + '\',\'\',\'\')">编辑</a> ' +
                                ' <a href="javascript:;" onclick="del(' + row.id + ')" class="ml-5 btn btn-danger-outline radius size-MINI" >删除</a>';
                        }
                    }
                }
            ],
        });

        /*  draw  在表格完成绘制后触发*/
        table.on('draw', function () {
            var info = table.page.info();
            //如果最后一页仅剩一条记录，而且不是在第一页
            if ((info.start == info.end) && info.end > 1) {
                //跳转到上一页
                $('#datatable_previous').click();
            }
        });
    });

    /*表格重新加载*/
    function table_reload(bool) {
        //清除表头 CheckBox的对勾
        $("#datatable").find("thead").find("input[type=checkbox]").removeAttr('checked');
        if (bool) {
            //true时，跳到第一页
            table.ajax.reload();
        } else {
            //false时，停留在原来页
            table.ajax.reload(null, false);
        }
    }

    /*删除*/
    function del(id) {
        var index2;

        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                type: 'GET',
                url: '/{{config('constant.name_admin')}}/role/del' + '?id=' + id,
                // dataType: 'json',
                success: function (data) {
                    // console.log(data);
                    if (data === '1') {
                        table_reload(0);//0停留在当前页，1回到第一页
                        layer.msg('删除成功!', {icon: 1, time: 2000});
                    } else {
                        layer.msg('删除失败!', {icon: 2, time: 2000});
                    }
                },
                error: function (data) {
                    ajax_error(data);
                },
                beforeSend: function () {
                    //0.4透明度 白色遮罩
                    index2 = layer.load(2, {shade: [0.05, '#000']});
                },
                complete: function () {
                    layer.close(index2);
                },
            });
        });
    }

    /*编辑*/
    function edit(title, url, id, w, h) {
        layer_show(title, url + '?id=' + id, w, h);
    }

    /*添加*/
    function add(title, url, w, h) {
        layer_show(title, url, w, h);
    }
</script>
</body>
</html>